<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Y</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/indexstyle.css" rel="stylesheet">
    <link rel="icon" href="img/logo.png" type="image/x-icon">
    <link rel="shortcut icon" href="img/logo.png" type="image/x-icon">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
    <script src="js/bootstrap.js"></script>
    <style>
        body {
            display: flex;
        }
        .sidebar, .right-sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            width: 20%;
            /*overflow-y: auto;*/
            padding: 20px;
        }
        .sidebar {
            left: 0;
        }
        .right-sidebar {
            right: 0;
        }
        .main-content {
            margin-left: 20%;
            margin-right: 20%;
            padding: 20px;
            flex-grow: 1;
            background-color: #f0f0f0; /
        }
        .logo {
            width: 60px; /* 调整图标宽度 */
            height: auto;
        }
        .profile-card {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }
        .profile-img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .profile-info {
            flex-grow: 1;
        }
        .dropdown-menu {
            min-width: auto;
        }
        .sidebar-bottom{
            width: 100%;
            height: auto;
        }
        .cat{
            width: 50%;
            height: auto;
        }
    </style>
</head>
<body>
<!-- 左侧边栏 -->
<div class="sidebar">
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="aaa" href="index.html"><img src="img/logo.png" alt="主页" class="logo"></a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="index.html"><img src="img/home.png" alt="主页"> 主页</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="friend.html"><img src="img/friends.png" alt="好友"> 好友</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="Notification.html"><img src="img/notification.png" alt="好友">通知 </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="myblog.html"><img src="img/blog.png" alt="博客"> 博客</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="user.html"><img src="img/person.png" alt="个人资料"> 个人资料</a>
        </li>
    </ul>
    <div class="sidebar-bottom">
        <img class="cat" src="img/猫猫烧烤.gif" alt="动图">
    </div>
</div>

<!-- 主内容 -->
<div class="main-content">
    <h5>为你推荐</h5>
    <!-- 推文 -->
    <div class="card mb-3">
        <div class="card-body">
            <h6>用户1</h6>
            <p>这是一条推文。</p>
        </div>
    </div>
    <div class="card mb-3">
        <div class="card-body">
            <h6>用户2</h6>
            <p>这是另一条推文。</p>
        </div>
    </div>
    <!-- 根据需要添加更多推文卡片 -->
</div>

<!-- 右侧边栏 -->
<div class="right-sidebar">
    <div class="profile-card" id="profile-card">
        <img src="img/default-avatar.png" alt="个人图片" class="profile-img">
        <div class="profile-info">
            <strong id="username">用户名</strong><br>
            <small id="userhandle">@defaultuser123</small>
        </div>
        <div class="dropdown show">
            <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">...</a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <a class="dropdown-item" href="login.html">Log out</a>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $.ajax({
            url: '../../java/com/qdu/servlet/GetUserInfoServlet.java',
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                $('#profile-card img').attr('src', data.avatar_url);
                $('#username').text(data.username);
                $('#userhandle').text('@' + data.username.toLowerCase().replace(' ', '') + '123');
            },
            error: function(err) {
                console.error('获取用户信息时出错:', err);
            }
        });

        // Initialize dropdowns
        $('.dropdown-toggle').dropdown();
    });
</script>
</body>
</html>
